<!--
  * @Author: daidai
  * @Date: 2022-03-01 15:51:43
  * @LastEditors: Please set LastEditors
  * @LastEditTime: 2022-09-29 15:12:46
  * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
 -->
<template>
  <div class="right_center">
    <div class="auth-activation-overview">
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧环形图 -->
        <div class="progress-section">
          <div class="progress-wrapper">
            <Echart
              id="authProgress"
              :options="progressOption"
              class="progress-chart"
            />
            <div class="progress-center">
              <div class="rate-text">{{ activationRate }}%</div>
              <div class="rate-label">激活率</div>
            </div>
          </div>
        </div>

        <!-- 右侧数据卡片 -->
        <div class="data-section">
          <div class="data-cards">
            <div class="data-card activated">
              <div class="card-icon">
                <i class="el-icon-circle-check"></i>
              </div>
              <div class="card-content">
                <div class="card-value">{{ formatNumber(activatedCount) }}</div>
                <div class="card-label">已激活</div>
              </div>
            </div>

            <div class="data-card pending">
              <div class="card-icon">
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="card-content">
                <div class="card-value">{{ formatNumber(pendingCount) }}</div>
                <div class="card-label">待激活</div>
              </div>
            </div>

            <div class="data-card total">
              <div class="card-icon">
                <i class="el-icon-user"></i>
              </div>
              <div class="card-content">
                <div class="card-value">{{ formatNumber(totalCount) }}</div>
                <div class="card-label">总数</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    props: {
      // 接收父组件传递的认证激活数据
      accountData: {
        type: Object,
        default: () => ({}),
      },
    },

    data() {
      return {
        timer: null,
        pageflag: true,
        progressOption: {},

        // 基础统计数据 - 与 right-top 保持一致的指标
        activatedCount: 0,
        pendingCount: 0,
        totalCount: 0,
      };
    },

    computed: {
      // 计算激活率
      activationRate() {
        if (this.totalCount === 0) return "0.00";
        return ((this.activatedCount / this.totalCount) * 100).toFixed(2);
      },
    },

    watch: {
      // 监听父组件传递的数据变化
      accountData: {
        handler(newData) {
          if (newData && Object.keys(newData).length > 0) {
            this.updateDataFromProps(newData);
            this.pageflag = true;
          }
        },
        immediate: true,
        deep: true,
      },
    },

    mounted() {
      // 初始化数据
      this.initData();

      // 初始化图表
      this.initProgressChart();

      // 设置定时器
      this.timer = setInterval(() => {
        this.initProgressChart();
        this.$forceUpdate(); // 更新时间显示
      }, 30000); // 每30秒更新一次
    },

    beforeDestroy() {
      this.clearData();
    },

    methods: {
      // 初始化数据
      initData() {
        console.log("初始化认证账号激活数据...");
        if (this.accountData && Object.keys(this.accountData).length > 0) {
          this.updateDataFromProps(this.accountData);
        }
      },

      // 根据父组件传递的数据更新组件状态
      updateDataFromProps(data) {
        console.log("更新认证账号激活数据:", data);

        // 提取认证相关数据 - 与 right-top 保持一致的指标结构
        this.totalCount = data.totalStudents || 0;
        this.activatedCount = data.rzActiveStats || 0;
        this.pendingCount = this.totalCount - this.activatedCount;

        // 重新初始化图表
        this.initProgressChart();
      },

      // 初始化环形进度图
      initProgressChart() {
        this.progressOption = {
          backgroundColor: "transparent",
          series: [
            // 数据系列
            {
              type: "pie",
              radius: ["70%", "85%"],
              center: ["50%", "50%"],
              startAngle: 90,
              avoidLabelOverlap: false,
              silent: true,
              data: [
                {
                  value: this.activatedCount,
                  name: "已激活",
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#4CAF50" },
                      { offset: 1, color: "#81C784" },
                    ]),
                    shadowColor: "rgba(76, 175, 80, 0.5)",
                    shadowBlur: 10,
                  },
                },
                {
                  value: this.pendingCount,
                  name: "待激活",
                  itemStyle: {
                    color: "rgba(20, 30, 50, 0.5)",
                    borderWidth: 1,
                    borderColor: "rgba(76, 175, 80, 0.2)",
                  },
                },
              ],
              labelLine: { show: false },
              label: { show: false },
            },
            // 外部辉光环
            {
              type: "pie",
              radius: ["90%", "93%"],
              center: ["50%", "50%"],
              silent: true,
              avoidLabelOverlap: false,
              data: [
                {
                  value: 100,
                  itemStyle: {
                    color: "rgba(76, 175, 80, 0.15)",
                    shadowColor: "rgba(76, 175, 80, 0.4)",
                    shadowBlur: 5,
                  },
                },
              ],
              labelLine: { show: false },
              label: { show: false },
            },
          ],
        };
      },

      formatNumber(num) {
        if (num >= 10000) {
          return (num / 10000).toFixed(1) + "w";
        }
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },

      getCurrentTime() {
        const now = new Date();
        return `${now.getHours().toString().padStart(2, "0")}:${now
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;
      },

      clearData() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .right_center {
    height: 100%;
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .auth-activation-overview {
    height: 100%;
    width: 100%;
    background: linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.9) 0%,
      rgba(23, 37, 64, 0.95) 100%
    );
    border-radius: 12px;
    border: 1px solid rgba(76, 175, 80, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: radial-gradient(
        circle at 50% 0%,
        rgba(76, 175, 80, 0.1) 0%,
        transparent 70%
      );
      pointer-events: none;
    }

    .main-content {
      flex: 1;
      display: flex;
      gap: 16px;
      padding: 12px;
      min-height: 0;
      align-items: center;

      .progress-section {
        flex: 0 0 140px;
        display: flex;
        align-items: center;
        justify-content: center;

        .progress-wrapper {
          position: relative;
          width: 140px;
          height: 140px;

          .progress-chart {
            width: 100%;
            height: 100%;
          }

          .progress-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;

            .rate-text {
              font-size: 24px;
              font-weight: 700;
              color: #69f0ae;
              line-height: 1;
              text-shadow: 0 0 12px rgba(105, 240, 174, 0.5);
              margin-bottom: 6px;
            }

            .rate-label {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.7);
              font-weight: 500;
              letter-spacing: 1.5px;
            }
          }
        }
      }

      .data-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;

        .data-cards {
          display: flex;
          flex-direction: column;
          gap: 10px;
          flex: 1;
          justify-content: center;

          .data-card {
            position: relative;
            background: rgba(10, 25, 47, 0.4);
            border: 1px solid rgba(76, 175, 80, 0.15);
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;

            &:hover {
              border-color: rgba(76, 175, 80, 0.4);
              background: rgba(17, 34, 63, 0.6);
              transform: translateY(-2px);
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            }

            .card-icon {
              width: 36px;
              height: 36px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 18px;
              flex-shrink: 0;
              color: #fff;
              box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
            }

            .card-content {
              flex: 1;
              min-width: 0;

              .card-value {
                font-size: 20px;
                font-weight: 700;
                line-height: 1.2;
                margin-bottom: 2px;
              }

              .card-label {
                font-size: 11px;
                color: rgba(255, 255, 255, 0.6);
                font-weight: 500;
              }
            }

            &.activated {
              .card-icon {
                background: linear-gradient(135deg, #4caf50, #388e3c);
              }
              .card-value {
                color: #69f0ae;
              }
            }

            &.pending {
              .card-icon {
                background: linear-gradient(135deg, #ffc107, #ffa000);
              }
              .card-value {
                color: #ffd54f;
              }
            }

            &.total {
              .card-icon {
                background: linear-gradient(135deg, #2196f3, #1976d2);
              }
              .card-value {
                color: #64b5f6;
              }
            }
          }
        }
      }
    }
  }

  // 响应式调整
  @media (max-height: 650px) {
    .auth-activation-overview {
      .main-content {
        padding: 8px;
        gap: 10px;

        .progress-section {
          flex-basis: 110px;
          .progress-wrapper {
            width: 110px;
            height: 110px;
            .progress-center .rate-text {
              font-size: 26px;
            }
          }
        }

        .data-section .data-cards {
          gap: 6px;
          .data-card {
            padding: 8px 12px;
            gap: 10px;
            .card-icon {
              width: 30px;
              height: 30px;
              font-size: 16px;
            }
            .card-content .card-value {
              font-size: 18px;
            }
          }
        }
      }
    }
  }
</style>
